<template>
  <layout fixed-navbar>
    <home-navbar/>
    <div class="carousel mb-16">
      <carousel
        v-if="slideList.length > 0"
        :per-page="1"
        :pagination-enabled="false"
        :autoplay-timeout="5000"
        autoplay
        loop
        autoplay-hover-pause>
        <slide
          v-for="(slide, i) in slideList"
          :key="i">
          <a
            :href="slide.href"
            target="_blank">
            <div
              class="carousel__img"
              aspectratio
              aspectratio-21-9>
              <img
                v-lazy="slide.image"
                :alt="slide.title"
                aspectratio-content>
            </div>
          </a>
        </slide>
      </carousel>
    </div>
    <panel
      title="热门展会"
      class="mb-16">
      <router-link
        slot="nav"
        to="/exhibitions">全部展会 <fa-icon icon="chevron-right"/></router-link>
      <exhibition-card-list>
        <router-link
          v-for="(exhibition, i) in homeHotExhibitionList"
          :key="i"
          :to="'/exhibitions/' + exhibition.id">
          <exhibition-card :model="exhibition"/>
        </router-link>
      </exhibition-card-list>
    </panel>
    <panel
      title="资讯"
      class="mb-16">
      <router-link
        slot="nav"
        to="/news">更多 <fa-icon icon="chevron-right"/></router-link>
      <article-list>
        <router-link
          v-for="(article, i) in homeNewsList"
          :key="i"
          :to="'/news/' + article.id">
          <article-item :model="article"/>
        </router-link>
      </article-list>
    </panel>
    <footer-bar/>
    <create-exhibition-btn/>
  </layout>
</template>

<style lang="scss" scoped>
  .carousel {
    &__img {
      width: 100%;
      img {
        display: block;
      }
    }
  }
</style>

<script>
import { Carousel, Slide } from 'vue-carousel'
import HomeNavbar from '@/components/HomeNavbar'
import Panel from '@/components/Panel'
import ExhibitionCardList from '@/components/ExhibitionCardList'
import ExhibitionCard from '@/components/ExhibitionCard'
import ArticleList from '@/components/ArticleList'
import ArticleItem from '@/components/ArticleItem'
import FooterBar from '@/components/FooterBar'
import Layout from '@/components/Layout'
import { mapState } from 'vuex'
import CreateExhibitionBtn from '@/components/CreateExhibitionBtn'

export default {
  components: {
    Carousel,
    Slide,
    HomeNavbar,
    Panel,
    ExhibitionCardList,
    ExhibitionCard,
    ArticleList,
    ArticleItem,
    FooterBar,
    Layout,
    CreateExhibitionBtn
  },
  computed: mapState(['slideList', 'homeHotExhibitionList', 'homeNewsList']),
  async created () {
    this.$store.dispatch('getSlideList')
    this.$store.dispatch('getHomeHotExhibitionList')
    this.$store.dispatch('getHomeNewsList')
  }
}
</script>
